<template>
	<view class="address_page">
		<view class="main">
			<view>
				<view class="items-box">
					<view class="label">收货人</view>
					<uv-input placeholder="请输入收货人姓名" border="none" v-model="formData.consignee" fontSize="30rpx"
						style="width: 100%;"></uv-input>
				</view>
				<view class="items-box">
					<view class="label">手机号码</view>
					<uv-input placeholder="请输入手机号码" border="none" type="number" v-model="formData.phone"
						fontSize="30rpx" style="width: 100%;" @blur="phoneBlur"></uv-input>
				</view>
				<view class="items-box">
					<view class="label">所在区域</view>
					<view @click="showCity" class="selectPlaceholder oneLineOverflow"
						:style="`color: ${formData.regionString ? '#666666' : '#c0c4cc'}`">
						{{ formData.regionString ? formData.regionString : '请选择所在区域' }}
					</view>
					<xzy-citys :defaultValue="defaultCity" :mask-close-able="true" @confirm="onsetCity"
						@cancel="show = false" :visible="show"></xzy-citys>
					<view @click="showCity">
						<uv-icon name="arrow-right" color="#e0e0e0" size="22"></uv-icon>
					</view>
				</view>
				<view class="items-box">
					<view class="label">详细地址</view>
					<uv-input placeholder="请输入详细地址" border="none" v-model="formData.address" fontSize="30rpx"
						style="width: 100%;"></uv-input>
				</view>
			</view>
			<view class="other">
				<view>
					<view style="margin-bottom: 16rpx;">设为默认地址</view>
					<view style="font-size: 24rpx;color: #666666;">收货地址默认为此地址</view>
				</view>
				<!-- :activeColor="bgType * 1 === 1 ? '#5181FB' : '#F93D38'" -->
				<uv-switch v-model="formData.isDefault" activeColor="#5181FB"
					:activeValue="1" :inactiveValue="0"></uv-switch>
			</view>
		</view>
		<view class="footer">
			<!-- :style="`background:${bgType * 1 === 1 ? 'linear-gradient(270deg, #A7A1F6 0%, #6E68E9 100%)' : '#F93D38' }`" -->
			<view class="btn" @click="submit">保存</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		getCurrentInstance
	} from 'vue';
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		SaveAddressApi
	} from '@/api/modules/mine';

	import {
		checkStr
	} from "@/utils"

	const formData = reactive({
		consignee: "",
		phone: "",
		region: "",
		address: "",
		isDefault: 1,
		regionString: ""
	})

	const defaultCity = ref(null)

	const show = ref(false)
	//	地址栏选中触发
	function onsetCity(e) {
		formData.region = (e.provinceCode + '').padEnd(6, "0") + '/' + (e.cityCode + '').padEnd(6, "0") + '/' + (e
			.areaCode + '').padEnd(6, "0")
		formData.regionString = e.name
		show.value = false
	}

	function showCity() {
		show.value = true
	}

	const bgType = ref(1)
	onLoad((options) => {
		const instance = getCurrentInstance().proxy
		const eventChannel = instance.getOpenerEventChannel();
		eventChannel.on('info', function(data) {
			if (data) {
				Object.assign(formData, data)
			}
		})

		bgType.value = options.bgType ? options.bgType : 1
	})

	const phoneBlur = () => {
		if (!checkStr(formData.phone, 'mobile')) {
			uni.$uv.toast("请输入正确的手机号码");
			return
		}
	}


	//节流
	function submit() {
		if (!formData.consignee) {
			uni.$uv.toast("收货人不能为空");
			return
		}
		if (!formData.phone) {
			uni.$uv.toast("请输入手机号码");
			return
		}
		if (!formData.region) {
			uni.$uv.toast("所在区域不能为空");
			return
		}
		if (!formData.address) {
			uni.$uv.toast("详细地址不能为空");
			return
		}

		uni.$uv.throttle(
			() => {
				SaveAddressApi(formData).then(res => {
					uni.$uv.toast("保存成功");
					setTimeout(() => {
						uni.navigateBack()
					}, 2000)
				})
			}, 3000
		)
	}
</script>

<style lang="scss" scoped>
	.address_page {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100%;

		.main {
			margin-top: 20rpx;
			// height: calc(100vh - 190rpx);
			flex: 1;
			overflow: auto;

			.other {
				margin-top: 20rpx;
				background-color: #fff;
				padding: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.items-box {
				background: #fff;
				padding: 30rpx;
				border-bottom: 1rpx solid #f3f3f3;
				display: flex;
				align-items: center;

				.phone {
					color: #808080;
					fontSize: 30rpx;
					padding-left: 10rpx;
				}

				.label {
					min-width: 128rpx;
					text-align: left;
					padding-right: 30rpx;
				}

				.selectPlaceholder {
					color: #666666;
					font-size: 30rpx;
					margin-left: 10rpx;
					width: 66%;
				}
				:deep(.uni-input-input){
					color: #666666;
				}
			}

			.items-box:last-child {
				border-bottom: none;
			}
		}

		.footer {
			height: 152rpx;
			// background: #fff;
			padding-top: 18rpx;
			// box-shadow: 0rpx -1rpx 0rpx 0rpx #ECECEC;

			.btn {
				width: 690rpx;
				// border-radius: 12rpx;
				margin: 0 auto;
				// display: flex;
				// align-items: center;
				// justify-content: center;
				// width: 690rpx;
				// min-height: 96rpx;
				// border-radius: 12rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				font-weight: 400;
				color: #fff;
				// margin: 92rpx auto;
				min-height: 80rpx;
				background: #6E68E9;
				border-radius: 200rpx;
			}
		}
	}
</style>